<template>
  <div class="DrawLotteryRaffle">
    <div class="bg-chunk">
      <h1 class="title-img-chunk">
        <img src="https://cancer.obs.cn-north-1.myhuaweicloud.com/hyh/202307131402.png" alt="">
      </h1>
      <div class="foundation_chunk">
        <div class="turntable_chunk">
          <!-- <div ref="prizeBgChunk" class="prize_bg_chunk " style="background-image: url(); background-size: 100% 100%; background-repeat: no-repeat;"></div> -->
          <div ref="prizeBgChunk" class="prize_bg_chunk " style="{backgroundImage: url(https://cancer.obs.cn-north-1.myhuaweicloud.com/188.png), backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat',}"></div>
          <div class="center_take_chunk">
            <img @click="onStart" src="https://cancer.obs.cn-north-1.myhuaweicloud.com/hyh/202302052246.webp" alt="">
          </div>
        </div>
        <div class="award_count_text">
          抽奖次数剩余：
          <span class="award_count_num">{{ awardNum }}</span>
          次
        </div>
      </div>
    </div>
    <van-dialog 
    v-model:show="show" 
    confirmButtonText="去看剧"
    @confirm="handleConfirmDialog"
    title="">
    <div class="van-dialog__message van-dialog__message--has-title van-dialog__message--left">
      <img class="dialog-img" src="../../../assets/img/dialog_pic.jpg" alt="">
    </div>
  </van-dialog>
  <van-dialog 
  v-model:show="showMoney" 
  :show-confirm-button="false"
  title="">
  <div class="" style="margin-top:10px">
    <div class="page-title ">恭喜你中奖了！</div>
    <div><span class="price">{{count}}</span>元
     </div>
    <div class="input-zfb"> 
      <van-cell-group >
        <van-field v-model="zfbNumber" name="请输入支付宝号"  placeholder="请输入支付宝号"  ref="inputNumber" 
        autocomplete="off"    size="large" style="border: 1px solid #999;
        border-radius: 5px;"/>
      </van-cell-group>
      <div class="money-rule">
        <div>注：</div>
        <p>1、请仔细核对您的支付宝账号是否正确，以免影响发放红包；</p>
        <p>2、红包将在三个工作日打到您的支付宝账户；</p>
        <p>3、最终解释权归本公司所有。</p>
      </div>
      <div>
        <van-button type="primary" @click="saveZfbNumber" style="width: 80%;
        margin: 10px;">保存</van-button>
      </div>
    </div>
  </div>
</van-dialog>
  </div>
</template>

<script>
import { ref, reactive, getCurrentInstance, onMounted, toRefs, unref, } from 'vue'
import { useRouter, useRoute, } from 'vue-router'
import { showToast, showConfirmDialog ,Dialog} from 'vant'
import api from '../api/index'


export default {
  setup() {
    const route = useRoute()
    const router = useRouter()

    const width = document.documentElement.clientWidth / 7.5
    document.documentElement.style.fontSize = width + 'px'
    const prizeBgChunk = ref(null)

    onMounted(() => {
      if(route.query.outTradeNo) {
        localStorage.setItem('outTradeNo', route.query.outTradeNo)
      }
      if (route.query.outTradeNo && localStorage.getItem('outTradeNo') == route.query.outTradeNo && localStorage.getItem('draw')) {
        state.time = 0;
        state.animing = true
      }
    })

    const state = reactive({
      zfbNumber:'',
      showMoney:false,
      animing: false,
      deg: 360 * 3,
      timer: null,
      interval: 3,
      time: 1,
      awardNum: 1,
      show: false,
      count:188,
      drawPic: '../../../assets/img/choujiang.png',
      prizeType:'',
    })

    const methods = {
      onStart() {
       const draw =localStorage.getItem('draw')
       if (state.animing || draw) return;//防止双击(误操作)
       unref(prizeBgChunk).style.transition = `all ${state.interval}s ease-out`;
       unref(prizeBgChunk).style.transform = `rotate(${state.time * state.deg}deg)`;
       api.get('getRaffleResult', {}).then(res => {
         let deg=0
         const {code,data}=res
         state.prizeType=data
         if (code * 1 === 200) {
           if(data*1 ==0){
             state.count=188
             deg=0
           }else if(data*1 ==1){
             state.count=88
             deg=-180
           }else if(data*1 ==2){
             state.count=28.8
             deg=-90
           }else if(data*1 ==3){
             state.count=8.8
             deg=90
           }else{
            state.count=8.8
             deg=-45
           }
           state.animing = true;
       
       //修改完样式，就可开始动画
       unref(prizeBgChunk).style.transform = `rotate(${state.time * state.deg +deg}deg)`;
       if(state.awardNum === 1) {
         state.awardNum--
       }

       clearTimeout(state.timer)
       state.timer = setTimeout(() => {
         state.animing = false
         state.time++
         localStorage.setItem('draw', 1)
         if(data*1 ==4){
           methods.confirm()
         }else{
           methods.confirmMoney()
         }
       }, state.interval * 1000 + 500)
               
         }else{
           location.href="https://youmeta.icornerstore.com/?orgId=22413052&cId=WZL1"
         }
       })
      
     },
      confirm() {
        state.show = true
      },
      confirmMoney() {
        state.show = false
        state.showMoney = true
      },
      handleConfirmDialog() {
        // router.push({
        //   path: '/',
        //   query: {
        //     outTradeNo: route.query.outTradeNo,
        //   }
        // })
        location.href="https://youmeta.icornerstore.com/pages/video/detail?orgId=22413052&vid=51&mid=26549133741911680&fxpid=1"
      },
      handleCancelDialog(){
        location.href="https://u.tuiabcedc.cn/2cd7"
      },     
      saveZfbNumber(){
        const params={
          phone:state.zfbNumber,
          drawResult:state.prizeType,
          outTradeNo:route.query.outTradeNo ? route.query.outTradeNo:localStorage.getItem('outTradeNo')
        }
        if(!!state.zfbNumber){
        api.post('savePrizeResults', { ...params }).then(res => {
          if (res.code === 200) {
            showToast('保存成功')
          } else {
            console.log(3333)
            showToast(res.message)
          }
        })
        }else{
          showToast('支付宝账号不能为空')
        }
      }
    }


    return {
      ...toRefs(state),
      prizeBgChunk,
      ...methods,
    }
  }
}
</script>

<style lang="scss" scoped>
  img {
    // pointer-events: none;
    width: 100%;
  }
  .DrawLotteryRaffle {
    background: #fdc172;
    height: 100vh;

    .bg-chunk {
      background: url(https://cancer.obs.cn-north-1.myhuaweicloud.com/hyh/202302071519.webp) no-repeat;
      background-size: 100% 100%;
      height: 12.78rem;
      margin: auto;
      overflow: hidden;
      position: relative;
      width: 7.5rem;
    }

    .title-img-chunk {
      // margin: 2.14rem auto auto;
      margin: 1.8rem auto auto;
      width: 7.5rem;
    }

    .foundation_chunk {
      background: url(https://cancer.obs.cn-north-1.myhuaweicloud.com/hyh/202302052204.webp) no-repeat;
      background-size: 100% 100%;
      height: 10.24rem;
      position: relative;
      width: 7.5rem;
    }

    .turntable_chunk {
      height: 5.7rem;
      left: 0.87rem;
      position: absolute;
      top: 0.92rem;
      width: 5.7rem;
    }

    .prize_bg_chunk {
      background: url(https://cancer.obs.cn-north-1.myhuaweicloud.com/188.webp) no-repeat;
      background-size: 100% 100%;
      height: 5.7rem;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      width: 5.7rem;
    }

    .center_take_chunk {
      height: 5.7rem;
      left: 0;
      position: absolute;
      top: 0;
      width: 5.7rem;
      z-index: 10;
    }

    .award_count_text {
      color: #fff;
      font-size: .21rem;
      font-weight: 400;
      left: 2.7rem;
      position: absolute;
      top: 7.95rem;
    }

   
    /deep/.van-dialog__message--left {
      text-align: center;
      margin-top: .5rem;
    }
    .dialog-img {
      width: 50%;
    }
    .input-zfb{
      width:90%;
      margin:0 auto;
    }
    .page-title {
     
      text-align: center;
      font-size: 8vmin;
      font-weight: 700;
      color: #d23411;
      width: 100%;
  }
   .price{
       display: inline-block;
      font-size: 12vmin;
      color: #d23411;
      margin:5px 0;
      font-weight: 700;
  }
  .money-rule{
    font-size:12px;
    color:#ddd;
    margin-top:5px;
    text-align:left;
    p{
      margin-bottom:2px;
    }
  }
  }
</style>